<template>
  <q-btn color="negative" @click.stop :label="btnLabel" :outline="mobile" :rounded="mobile" :flat="!mobile" :round="!mobile" dense :icon="btnIcon">
    <q-menu auto-close anchor="center left" self="center right">
      <div class="row no-wrap items-center q-pa-sm">
        <span class="text-no-wrap">确定{{ opt }}该条记录吗？</span>
        <q-btn flat round dense color="negative" :icon="confirmIcon" @click="$emit('confirm')">
          <q-tooltip>确认{{ opt }}</q-tooltip></q-btn>
      </div>
    </q-menu>
  </q-btn>
</template>

<script>
export default {
  name: 'BtnDel',
  props: {
    label: String,
    icon: {
      type: String,
      default: 'delete'
    },
    opt: {
      type: String,
      default: '删除'
    }
  },
  data() {
    return {
      mobile: false,
      btnLabel: null,
      btnIcon: undefined,
      confirmIcon: undefined,
    };
  },
  mounted() {
    this.mobile = this.$q.platform.is.mobile;
    this.outline = this.mobile;
    this.rounded = this.mobile;
    this.flat = !this.mobile;
    this.round = !this.mobile;
    if (this.mobile) {
      this.btnLabel = '删除';
    } else {
      this.btnIcon = this.icon;
    }
    this.confirmIcon = this.icon;
  },
};
</script>
